import React, { useState } from 'react';
import { extractVideoText } from '../services/videoApi';

const VideoTextPage = () => {
  const [url, setUrl] = useState('');
  const [loading, setLoading] = useState(false);
  const [result, setResult] = useState(null);
  const [error, setError] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    
    if (!url.trim()) {
      setError('请输入视频链接');
      return;
    }

    setLoading(true);
    setError('');
    setResult(null);

    try {
      const data = await extractVideoText(url.trim());
      setResult(data);
    } catch (err) {
      setError(err.message || '解析失败，请稍后重试');
    } finally {
      setLoading(false);
    }
  };

  const copyToClipboard = (text) => {
    navigator.clipboard.writeText(text).then(() => {
      alert('已复制到剪贴板');
    });
  };

  return (
    <div style={{ padding: '20px', maxWidth: '800px', margin: '0 auto' }}>
      <h1>获取视频文案</h1>
      <p style={{ color: '#666', marginBottom: '20px' }}>
        支持抖音、快手、B站、小红书等平台的视频文案提取
      </p>

      <form onSubmit={handleSubmit} style={{ marginBottom: '30px' }}>
        <div style={{ marginBottom: '15px' }}>
          <input
            type="text"
            value={url}
            onChange={(e) => setUrl(e.target.value)}
            placeholder="请输入视频链接，如：https://www.douyin.com/video/xxx"
            style={{
              width: '100%',
              padding: '12px',
              fontSize: '14px',
              border: '1px solid #ddd',
              borderRadius: '4px',
              boxSizing: 'border-box'
            }}
          />
        </div>
        
        <button
          type="submit"
          disabled={loading}
          style={{
            padding: '12px 24px',
            fontSize: '14px',
            backgroundColor: loading ? '#ccc' : '#007bff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: loading ? 'not-allowed' : 'pointer'
          }}
        >
          {loading ? '解析中...' : '获取文案'}
        </button>
      </form>

      {error && (
        <div style={{
          padding: '12px',
          backgroundColor: '#f8d7da',
          color: '#721c24',
          border: '1px solid #f5c6cb',
          borderRadius: '4px',
          marginBottom: '20px'
        }}>
          {error}
        </div>
      )}

      {result && (
        <div style={{
          border: '1px solid #ddd',
          borderRadius: '8px',
          padding: '20px',
          backgroundColor: '#f9f9f9'
        }}>
          <h2>解析结果</h2>
          
          {result.title && (
            <div style={{ marginBottom: '15px' }}>
              <label style={{ fontWeight: 'bold', display: 'block', marginBottom: '5px' }}>
                视频标题:
              </label>
              <div style={{ 
                padding: '10px', 
                backgroundColor: 'white', 
                border: '1px solid #eee',
                borderRadius: '4px',
                position: 'relative'
              }}>
                {result.title}
                <button
                  onClick={() => copyToClipboard(result.title)}
                  style={{
                    position: 'absolute',
                    top: '5px',
                    right: '5px',
                    padding: '4px 8px',
                    fontSize: '12px',
                    backgroundColor: '#28a745',
                    color: 'white',
                    border: 'none',
                    borderRadius: '3px',
                    cursor: 'pointer'
                  }}
                >
                  复制
                </button>
              </div>
            </div>
          )}

          {result.text_content && (
            <div style={{ marginBottom: '15px' }}>
              <label style={{ fontWeight: 'bold', display: 'block', marginBottom: '5px' }}>
                视频文案:
              </label>
              <div style={{ 
                padding: '10px', 
                backgroundColor: 'white', 
                border: '1px solid #eee',
                borderRadius: '4px',
                position: 'relative',
                whiteSpace: 'pre-wrap'
              }}>
                {result.text_content}
                <button
                  onClick={() => copyToClipboard(result.text_content)}
                  style={{
                    position: 'absolute',
                    top: '5px',
                    right: '5px',
                    padding: '4px 8px',
                    fontSize: '12px',
                    backgroundColor: '#28a745',
                    color: 'white',
                    border: 'none',
                    borderRadius: '3px',
                    cursor: 'pointer'
                  }}
                >
                  复制
                </button>
              </div>
            </div>
          )}

          {result.author && (
            <div style={{ marginBottom: '15px' }}>
              <label style={{ fontWeight: 'bold', display: 'block', marginBottom: '5px' }}>
                作者信息:
              </label>
              <div style={{ 
                padding: '10px', 
                backgroundColor: 'white', 
                border: '1px solid #eee',
                borderRadius: '4px'
              }}>
                <div>昵称: {result.author.nickname}</div>
                {result.author.signature && (
                  <div style={{ marginTop: '5px' }}>简介: {result.author.signature}</div>
                )}
              </div>
            </div>
          )}

          {result.tags && result.tags.length > 0 && (
            <div style={{ marginBottom: '15px' }}>
              <label style={{ fontWeight: 'bold', display: 'block', marginBottom: '5px' }}>
                相关标签:
              </label>
              <div style={{ 
                padding: '10px', 
                backgroundColor: 'white', 
                border: '1px solid #eee',
                borderRadius: '4px'
              }}>
                {result.tags.map((tag, index) => (
                  <span
                    key={index}
                    style={{
                      display: 'inline-block',
                      backgroundColor: '#e9ecef',
                      padding: '4px 8px',
                      margin: '2px',
                      borderRadius: '12px',
                      fontSize: '12px'
                    }}
                  >
                    {tag}
                  </span>
                ))}
              </div>
            </div>
          )}

          {result.statistics && (
            <div style={{ marginBottom: '15px' }}>
              <label style={{ fontWeight: 'bold', display: 'block', marginBottom: '5px' }}>
                统计数据:
              </label>
              <div style={{ 
                padding: '10px', 
                backgroundColor: 'white', 
                border: '1px solid #eee',
                borderRadius: '4px',
                display: 'grid',
                gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
                gap: '10px'
              }}>
                {result.statistics.play_count && (
                  <div>播放量: {result.statistics.play_count.toLocaleString()}</div>
                )}
                {result.statistics.like_count && (
                  <div>点赞数: {result.statistics.like_count.toLocaleString()}</div>
                )}
                {result.statistics.comment_count && (
                  <div>评论数: {result.statistics.comment_count.toLocaleString()}</div>
                )}
                {result.statistics.share_count && (
                  <div>分享数: {result.statistics.share_count.toLocaleString()}</div>
                )}
              </div>
            </div>
          )}

          {result.publish_time && (
            <div>
              <label style={{ fontWeight: 'bold', display: 'block', marginBottom: '5px' }}>
                发布时间:
              </label>
              <div style={{ 
                padding: '10px', 
                backgroundColor: 'white', 
                border: '1px solid #eee',
                borderRadius: '4px'
              }}>
                {result.publish_time}
              </div>
            </div>
          )}
        </div>
      )}
    </div>
  );
};

export default VideoTextPage;